<template>
	<view class="container">
		<!-- 背景图片 -->
		<view class="background"></view>

		<!-- 计分板（发光球） -->
		<view class="score-board">
			<view class="inner-glow"></view> <!-- 额外光晕 -->
			<text class="score-text" :style="{ fontSize: dynamicFontSize }">
				{{ score }}
			</text>
		</view>
	</view>
</template>

<script>
	import xyTabbar from '@/components/xy-tabbar';

	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				score: 200, // 默认分数
				store_id: '',
				refreshTimer: null, // 定时器变量
			};
		},
		computed: {
			// 动态计算字体大小
			dynamicFontSize() {
				const baseSize = 20; // 基础字体大小（单位vw）
				const scoreLength = String(this.score).length; // 计算得分的长度

				// 根据得分位数调整字体大小
				if (scoreLength <= 2) {
					return `${baseSize}vw`; // 1-2位数，使用默认大小
				} else if (scoreLength <= 4) {
					return `${baseSize * 0.8}vw`; // 3-4位数，缩小 20%
				} else {
					return `${baseSize * 0.6}vw`; // 5位以上，缩小 40%
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.store_id = options.id;
				this.loadData();

				// 开启定时器，每2秒刷新数据
				this.refreshTimer = setInterval(this.loadData, 2000);
			}
		},
		beforeDestroy() {
			// 组件销毁时清除定时器，防止内存泄漏
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
			}
		},
		methods: {
			loadData() {
				this.$api.post({
					url: '/Venue/getRoomScore',
					loadingTip: '加载中...',
					data: {
						room_id: this.store_id,
					},
					success: res => {
						console.log('刷新得分:', res.score);
						this.score = res.score;
					},
				});
			},
		},
	};
</script>

<style scoped>
	/* 整个页面 */
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	/* 背景 */
	.background {
		position: absolute;
		width: 100vw;
		height: 100vh;
		background-image: url('./assets/room/roomBack.png');
		/* 替换为你的背景图路径 */
		background-size: cover;
		background-position: center;
		filter: brightness(0.9);
	}

	/* 计分板 - 发光球（占屏幕一半） */
	.score-board {
		width: 50vh;
		/* 让球的大小等于屏幕一半 */
		height: 50vh;
		max-width: 280px;
		max-height: 280px;
		background: radial-gradient(circle, rgba(0, 255, 0, 0.9), rgba(0, 150, 0, 0.8));
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		box-shadow: 0 0 40px rgba(0, 255, 0, 0.8), 0 0 80px rgba(0, 255, 0, 0.5);
		border: 3px solid rgba(255, 255, 255, 0.3);
		overflow: hidden;
	}

	/* 内部高光效果 */
	.inner-glow {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, rgba(0, 0, 0, 0) 60%);
		opacity: 0.8;
		pointer-events: none;
	}

	/* 文字 - 更大更醒目 */
	.score-text {
		color: #fff;
		font-weight: bold;
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 255, 0, 0.8);
	}
</style>